<script setup lang="ts">
import { patrolingCruise } from '@/api'
import { useCarStore } from '@/stores/car'
import { computed, ref, type Ref } from 'vue'
import { useI18n } from 'vue-i18n'

interface SwitchGroup {
  title: string
  ref: Ref<boolean>
  disabled?: Ref<boolean> | boolean
  event?: (value: any) => any
}

// 近灯是否开启
const lowLight = ref(false)

// 远灯是否开启
const highLight = ref(false)

//自动灯是否开启
const autoLight = ref(false)

// 近远灯映射值
const lightModes = {
  HIGHBEAM: '01',
  LOWBEAM: '02',
  AUTOBEAM: '03'
}

// 切换近远灯相关事件
function toggleLight(value: boolean, mode: string) {
  const carStore = useCarStore()
  const data = {
    code: carStore.currentCar,
    param1: 1,
    param2: value ? mode : '00',
    param3: 255,
    param4: 255
  }
  patrolingCruise(data)
}
const { t } = useI18n()
// 切换按钮组
const switchGroup = computed<SwitchGroup[]>(() => [
  {
    title: t('jin-guang-deng'),
    ref: lowLight,
    event: (value: boolean) => {
      lowLight.value = value
      toggleLight(value, lightModes.LOWBEAM)
    },
    disabled: highLight.value || autoLight.value ? true : false
  },
  {
    title: t('yuan-guang-deng'),
    ref: highLight,
    event: (value: boolean) => {
      highLight.value = value
      toggleLight(value, lightModes.HIGHBEAM)
    },
    disabled: lowLight.value || autoLight.value ? true : false
  },
  {
    title: t('zi-dong-yuan-guang-deng'),
    ref: autoLight,
    event: (value: boolean) => {
      autoLight.value = value
      toggleLight(value, lightModes.AUTOBEAM)
    },
    disabled: lowLight.value || highLight.value ? true : false
  }
])
</script>

<template>
  <el-card
    shadow="always"
    :header="t('che-deng-kong-zhi')"
    class="flex-1"
    style="--el-card-padding: 0"
  >
    <div class="flex justify-between p-1" v-for="(item, index) in switchGroup" :key="index">
      <span class="text-sm">{{ item.title }}</span>
      <el-switch
        size="small"
        :model-value="item.ref.value"
        @change="item.event"
        :disabled="Boolean(item.disabled)"
      />
    </div>
  </el-card>
</template>

<style scoped lang="scss">
:deep(.el-card__header) {
  padding: 0 0 0 10px;
  font-size: small;
  // border-bottom: none;
}
</style>
